<template>
    <div class="app-container">
        <div>
            <el-form label-width="100px" :model="report">
                <div style="width: 18%; display: inline-block;">
                    <el-form-item label="报告id">
                        <el-input v-model="report.reportID" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
                <div style="width: 20%; display: inline-block;">
                    <el-form-item label="学生用户名">
                        <el-input v-model="report.studentUserName" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
                <div style="width: 25%; display: inline-block;">
                    <el-form-item label="报告创建时间">
                        <el-input v-model="report.createDate" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
                <div style="width: 30%; display: inline-block;">
                    <el-form-item label="检查项目名">
                        <el-input v-model="report.ptdtCheckName" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
                <div style="width: 18% ;display: inline-block;">
                    <el-form-item label="检查项目类型">
                        <el-input v-model="report.ptdtCheckMachine" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
                <div style="width: 18%; display: inline-block;">
                    <el-form-item label="状态">
                        <el-input v-model="status[report.status]" style="width: 100%" :readonly=true></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div style="width: 50%; display: inline-block;">
                <div>
                    <span>病人信息</span>
                </div>

                <div>
                    <el-tabs type="border-card">
                        <el-tab-pane label="病史">
                            <!-- -->
                            <div>
                                <el-input type="textarea" :rows="8" v-model="report.ptdtBgReadyTxt" :readonly=true>
                                </el-input>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="检查所见">
                            <!--  -->
                            <div>
                                <el-input type="textarea" :rows="8" v-model="report.ptdtCheckSjTxt" :readonly=true>
                                </el-input>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="检查意见">
                            <div>
                                <el-input type="textarea" :rows="8" v-model="report.ptdtCheckYjTxt">
                                </el-input>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div style="width: 50%; display: inline-block;">
                <div>
                    <div>
                        <span>学生报告</span>
                    </div>
                    <div>
                        <el-tabs type="border-card">
                            <el-tab-pane label="检查准备">
                                <div>
                                    <el-input type="textarea" :rows="8" placeholder="请输入内容"
                                        v-model="report.jcProReadyTxt">
                                    </el-input>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="检查技术">
                                <div>
                                    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="report.jcReadyTxt">
                                    </el-input>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="检查所见">
                                <div>
                                    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="report.jcSjTxt">
                                    </el-input>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="检查意见">
                                <div>
                                    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="report.jcYjTxt">
                                    </el-input>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
            <div>
                <span>教师评价</span>
            </div>
            <div style="width: 100%; display: inline-block;">
                <div style="width: 50%; display: inline-block;float: left;">
                    <el-tabs type="border-card">
                        <el-tab-pane label="检查准备">
                            <div>
                                <el-input type="textarea" style="width: 600px" :rows="8" placeholder="请输入内容"
                                    v-model="report.checkProReady">
                                </el-input>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="检查技术">
                            <div>
                                <el-input type="textarea" style="width: 600px" :rows="8" placeholder="请输入内容"
                                    v-model="report.checkReady">
                                </el-input>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="检查所见">
                            <div>
                                <el-input type="textarea" style="width: 600px" :rows="8" placeholder="请输入内容"
                                    v-model="report.checkSee">
                                </el-input>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="检查意见">
                            <div>
                                <el-input type="textarea" style="width: 600px" :rows="8" placeholder="请输入内容"
                                    v-model="report.checkOpinion">
                                </el-input>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style=" display: flex; align-items: center;float: left;">
                    <div>请评分 </div>
                    <div style="float:left; display: flex;">
                        <el-input type="text" style="width: 150px" :rows="1" placeholder="请输入1-100分数" v-model="report.score"
                            :clearable=true
                            oninput="if(value>100)value=100;if(value.length>4)value=value.slice(0,4);if(value<0)value=0"
                            onkeyup="this.value=this.value.replace(/\D/g,'')">
                        </el-input>
                    </div>
                    <div style="float:right; display: flex;">
                        <template>
                            <el-button type="primary" @click="insertComment">提交评价</el-button>
                        </template>
                    </div>
                </div>
                
            </div>
            <div style="width: 100%; display: inline-block;">
                <el-col :span="10">
                    <div class="rightCell">
                        <el-tabs v-model="activeName" @tab-click="handleNodeClick">
                            <el-tab-pane label="历史" name="first">
                                <el-card>
                                    <el-descriptions title="病史"></el-descriptions>
                                    <div class="contents" v-for="(item,index) in HistoryVo" :key="index">
                                        <div class="text-item">
                                            <span>
                                                {{item.ptdtCheckDate}}
                                            </span>
                                            <p></p>
                                            <span>
                                                {{item.ptdtBgReadyTxt}}
                                            </span>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card>
                                    <el-descriptions title="检查所见"></el-descriptions>
                                    <div class="text-item" v-for="(item,index) in HistoryVo" :key="index">
                                        <span>
                                            {{item.ptdtCheckDate}}
                                        </span>
                                        <p></p>
                                        <span>
                                            {{item.ptdtCheckSjTxt}}
                                        </span>
                                    </div>
                                </el-card>
                                <el-card>
                                    <el-descriptions title="检查意见"></el-descriptions>
                                    <div class="text-item" v-for="(item,index) in HistoryVo" :key="index">
                                        <span>
                                            {{item.ptdtCheckDate}}
                                        </span>
                                        <p></p>
                                        <span>
                                            {{item.ptdtCheckyjTxt}}
                                        </span>
                                    </div>
                                </el-card>
                            </el-tab-pane>
                            <el-tab-pane label="截图" name="second">
                                <div class="contents">截图</div>
                            </el-tab-pane>
                            <el-tab-pane label="模板" name="third">
                                <div class="contents">
                                    <el-tree :data="data" :props="defaultProps" @node-click="getTemplateInfo">
                                    </el-tree>
                                </div>
                                <el-card class="box-card" lable="检查所见" :size="600">
                                    {{TemplateInfo.libCheckSj}}
                                </el-card>
                                <el-card class="box-card" lable="检查意见">
                                    {{TemplateInfo.libCheckYj}}
                                </el-card>
                            </el-tab-pane>
                            <el-tab-pane label="序列" name="fourth">
                                <div class="contents">序列</div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </div>

        </div>

    </div>
</template>
<script>
    import teacher from '@/api/report/teacher'
    export default {
        data() {
            return {
                reportId: this.$route.query.id,
                report: {},
                status: ["未完成", "已完成", "已批改"],
                updateStatus: '2',
                //
                cdoe: '',
                //病史
                HistoryVo: [],
                activeName: 'first',
                defaultProps: {
                    label: 'label',
                    children: 'children'
                },
                data: [],
                TemplateInfo: {}
            }
        },
        created() {
            this.getReport(this.$route.query.id)
        },
        methods: {
            //获取报告详情
            getReport(reportId) {
                teacher.getReport(reportId).then(response => {
                    this.report = response.data
                })
            },
            //新增/修改评价
            insertComment() {
                if (this.report.status == "1") {
                    if (this.report.checkSee == null) {
                        this.report.checkSee = ''
                    }
                    if (this.report.checkProReady == null) {
                        this.report.checkProReady = ''
                    }
                    if (this.report.checkReady == null) {
                        this.report.checkReady = ''
                    }
                    if (this.report.checkOpinion == null) {
                        this.report.checkOpinion = ''
                    }
                    teacher.insertComment(this.report, this.updateStatus).then(response => {
                        this.cdoe = response.code
                        if (this.cdoe == 200) {
                            this.$router.push({ path: `/teacher/studentReport` })
                            this.code = ''
                        }
                    })

                }
                if (this.report.status == "2") {
                    teacher.updateComment(this.report).then(response => {
                        this.cdoe = response.code
                        if (this.cdoe == 200) {
                            this.$router.push({ path: `/teacher/studentReport` })
                            this.code = ''
                        }
                    })
                }
                if (this.report.status == "0") {
                    this.$message('请勿批改学生未完成的报告');
                    this.$router.push({ path: `/teacher/studentReport` })
                }
            },

            //点击节点触发
            getTemplateInfo(e) {
                teacher.getTemplateInfo(e.id, e.pid).then(

                    response => {
                        console.log(e)
                        this.TemplateInfo = response.data || {}
                        console.log(this.TemplateInfo)
                    }
                )
            },
            //标签页切换触发
            handleNodeClick(e) {
                switch (this.activeName) {
                    case 'first':
                        this.getBgReady()
                        break
                    case 'second':
                        console.log('second')
                        break
                    case 'third':
                        teacher.getTemplate().then(response => {
                            this.data = response.data.public
                        })
                        break
                    case 'four':
                        console.log('fourth')
                        break
                }

            },

        }

    }

</script>